<style type="text/css">
    .hlBox {
        width: 100%;
        height: 222px;
        border: 1px solid #d4ccb0;
        background-color: #fbfaf3;
        margin: 0.8em 0px;
        overflow: hidden;
    }

    .hlBox img {
        float: left;
        margin-right: 1em;
        height: 100%;
        max-width: 50%;
    }

    .hlBox .hlDetail {
        margin: 0px 1em;
    }
</style>
<?php foreach ($hlList as $artikel) { ?>
    <div class="hlBox">
        <img src="<?php echo $artikel->content_id->hlPicSrc; ?>" />
        <div class="hlDetail">
            <div class="hlDate" style="margin-top: 0.75em;line-height: 1.5em;display: inline-block; width: 20px; height: 2.5em; padding-right: 5px; float: left; text-align: right; border-right: 1px solid #d4ccb0;"><?php echo $artikel->content_id->posted_date; ?></div>
            <div style="margin-top: 0.6em;line-height: 1.8em;display: inline-block; width: 235px; min-height: 2.5em; padding-left: 4px; margin-bottom: 1.3em;"><h1 style="margin: 0px;"><a href='<?php echo site_url("artikel/kr/" . $artikel->id); ?>'><?php echo $artikel->content_id->title; ?></a></h1>oleh <a href='<?php echo site_url("user/" . $artikel->content_id->poster_id->id); ?>'><?php echo $artikel->content_id->poster_id->display_name; ?></a></div>
            <p>
                <?php echo $artikel->content_id->shortHL; ?>
            </p>
        </div>
    </div>
<?php } ?>
<div class="dtttd hidden"></div>
<script type="text/javascript">
    jQuery(document).ready(function() {
        $(".dtttd").datepicker();
        $(".hlBox .hlDetail .hlDate").each(function() {
            var dates = ($(this).text()).split('-');
            var monthString = $(".dtttd").datepicker("option", "monthNamesShort")[parseInt(dates[1]) - 1];
            var dateString = parseInt(dates[2]);
            $(this).html(monthString + "<br />" + dateString);
        });
    });
</script>